<template>
    <div>
        <el-button @click="open">test</el-button>
        <el-dialog v-model="dialogVisible" title="Tips" width="80%" :before-close="handleClose">
            <div style="display: flex;justify-content: flex-start;height: 50vh;">
                <div class="left">
                    <ul class="list-group list-group-flush scopeCss"
                        style="height: calc(100% - 10px) ;border: 0.5px dotted  rgba(71, 71, 71, 0.541);">
                        <li class="list-group-item d-flex justify-content-between align-items-center curos"
                            v-for="(item, index) in chapterList" :key="index">
                            <span class="text-secondary" v-show="!item.editStatus">
                                {{ item.name }}
                            </span>
                            <div class="d-flex justify-content-between">
                                <el-input v-show="item.editStatus" v-model="item.name" style="width: 75%;"
                                    placeholder="标题"></el-input>
                                <el-input-number v-show="item.editStatus" controls-position="right" v-model="item.sort"
                                    style="width: 25%;font-size: 12px;" placeholder="排序"></el-input-number>
                            </div>
                            <div class="d-flex justify-content-between">
                                <el-link type="primary" v-show="!item.editStatus" @click="item.editStatus = true"><el-icon>
                                        <Edit />
                                    </el-icon></el-link>
                                <el-link type="primary" v-show="item.editStatus"
                                    @click="item.editStatus = false"><el-icon><Select /></el-icon></el-link>
                                <el-link type="primary" v-show="item.name" ><el-icon>
                                        <CloseBold />
                                    </el-icon></el-link>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    2
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script >
import { ref } from "vue"
export default {
    data() {
        return {
            dialogVisible: true,
            chapterList:[]
        }
    },
    methods: {
        open() {
            this.dialogVisible = true
        }
    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.left {
    width: 200px;
    height: 100%;
    overflow: auto;
}

.right {
    width: calc(100% - 210px);
    margin-left: 10px;
}
</style>